DAY10 - [中場加映] CSS Methodology - Atomic CSS & IT CSS - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 12 屆 iThome 鐵人賽

DAY 10

Modern Web

不只是寫寫CSS，切版概念30天系列第 10 篇

DAY10 - [中場加映] CSS Methodology - Atomic CSS & IT CSS

12th鐵人賽

Lynn

2020-09-25 23:51:30

2567 瀏覽

分享至

1. 為什麼需要 CSS Methodology ？

撰寫CSS一直以來面對到的問題

問題1. 自由度極高，因此缺乏對應的方法便容易造成難以維護的問題
css幾乎不存在著只能這樣寫的作法，因此再多人開發習慣皆不同時，很容易造成維護上的問題
問題2. 不同命名，卻有相同效果
不同人一起開發時，可能還會有不同命名，卻有相同效果：

block1__text_highlightt {
  color: yellow;
}

...

block2__text_bright {
  color: yellow;
}

問題3. CSS 階層越多，效能就會越差
因為怕覆蓋別人的東西，階層越下越多，就容易造成效能下降

CSS Methodology 目的

希望定義一個CSS撰寫規則，能讓 CSS 在大型專案下能擁有更好的重用性與維護性

2. 常見的 CSS Methodology

BEM

OOCSS

SMACSS

3. 滿意度第三名 - Atomic CSS

Yahoo 開發的一個開源工具
主要的概念其實就是 Functional CSS

There are only two hard things in Computer Science: cache invalidation and naming things.

– Phil Karlton

宗旨. 將 CSS style 最小元件化，重用性最大化

只要確保同一個 style 永遠只會被定義一次，並且可以運用在各個地方，就能解決這些問題！

看個例子：

一般寫法

<!-- 一般的寫法 -->
<div class="card">
    <h5 class="card-title">測試標題</h5>
</div>

.card{
    display: flex;
    width: 300px;
}
.card-title{
    font-size: 18px;
    color: blue;
}

Atomic css 寫法：

<div class="D(f) W(300px)">
    <h5 class="FS(18px) C(blue)">測試標題</h5>
</div>

.D\(f\) {
  display: flex;
}
.W\(300px\) {
  width: 300px;
}
.FS\(18px\) {
    font-size: 18px;
}
.C\(blue\) {
  color: blue;
}

聽到這裡，你的第一個感覺也許是...

什麼邪魔歪道！一點可讀性也沒有

你也許會產生的疑問 (ref: In defense of Functional CSS )

疑問1. 跟 inline style 差在哪？

Inline style 不能有 media query
inline style 的屬性可以隨意設置
Inline style 沒辦法處理 :before, :after
Inline style 無法重用，但是 css class 可以，我可以定義一個叫做 .bg-red 的規則，想要背景是紅色的加上去就行了
Inline style 跟 functional css 的可讀性還是有差，比比看
class="f-sm bg-blue" 跟
style="font-size: 10px; background-color: #0000ff;"

疑問2. 把HTML弄得很髒還不知道在幹嘛

以一般的寫法，一看就知道是一張卡，有標題

<!-- 一般的寫法 -->
<div class="card">
    <h5 class="card-title">測試標題</h5>
</div>

Atomic css 寫法... 這是... ?

<!--Atomic寫法 -->
<div class="D(f) W(300px)">
    <h5 class="FS(18px) C(blue)">測試標題</h5>
</div>

但，其實你可以一起用啊，看看以下：

<!-- 融合版的寫法 -->
<div class="card D(f) W(300px)">
    <h5 class="card-title FS(18px) C(blue)">測試標題</h5>
</div>

疑問3. 重用性太低了吧？我要幫每個 button 都寫 20 個 class？

假設我有一個 button 用 Atomic css 之後長這樣：

<div class="BG(blue) FS(14px) C(white)">按鈕文字</div>

你心裡的OS ...
那如果我有其他地方要用這個 button，我不就要複製這一串？
如果我 button 的樣式換了，那我不就所有地方都要改？
這個重用性也太差了吧。

但，其實你應該把這個東西變成一個 component，這樣問題就迎刃而解了，因為你只要改 component 就好，不用每個地方都改。

優點

優點1 Class Name 一致性大幅提升

你從此可大幅降低寫重覆CSS的頻率！而且你也不用再猶豫 class name 到底要取什麼了！

優點2 Code Review 變得相對容易

直接從HTML可以較快速地看到哪些是不符合共用規則的CSS，而非藏在很多不同的css

優點3 CSS檔案大小驟減

padding: 4px 只會在 CSS 檔案裡面出現唯一一次，color: red 也只會出現唯一一次
當你所有需要的規則都在裡面了，你的 CSS 大小不會再隨著網站的複雜度增加。

優點4 CSS 耦合性降低

絕對不會發生改一個 class name 壞兩個 component 的情況，因為每個 class name 都不會互相干擾
也可以保證你把這個 component 搬到任何地方都還是長得一樣，背後不會有特別的 CSS 是隱藏的坑

4. 鮮為人知，但使用過後滿意度不得了 - IT CSS

IT CSS = Inverted Triangle CSS

ITCSS 是一個架構，一個將CSS元素架構化的方法
它不是一個Framework 也不是一個命名規則，
適合用於大型的專案中
由 Harry Roberts 提出
其中最大的原則：將程式碼分成幾個由反轉三角形組成的階層(Layer)

Settings
- used with preprocessors and contain font, colors definitions, etc.
- ==> 變數定義
Tools
- globally used mixins and functions.
- It’s important not to output any CSS in the first 2 layers.
- ==> 共用 mixin, function
Generic
- reset and/or normalize styles, box-sizing. definition, etc.
- This is the first layer which generates actual CSS.
- ==> reset style
Elements
- styling for bare HTML elements (like H1, A, etc.).
- These come with default styling from the browser so we can redefine them here.
- ==> HTML Tag style
Objects
- class-based selectors which define undecorated design patterns, for example media object known from OOCSS
- ==> Eg. 基本UI元件，eg. tab樣式, 按鈕樣式
Components
- specific UI components.
- This is where the majority of our work takes place and our UI components are often composed of * Objects and Components
- ==> Eg. 特定的版型樣式
Utilities
- utilities and helper classes with ability to override anything which goes before in the triangle, eg. hide helper class
- ==> Eg. center, hidden 這種全域class樣式